<template>
  <div class="chart-settings">
    <a-form layout="vertical">
      <!-- 图表标题设置 -->
      <a-form-item label="标题">
        <a-input v-model:value="localOptions.title.text" placeholder="请输入图表标题" />
      </a-form-item>
      
      <a-form-item label="显示标题">
        <a-switch v-model:checked="localOptions.title.show" />
      </a-form-item>
      
      <!-- X轴设置 -->
      <a-divider>X轴设置</a-divider>
      
      <a-form-item label="X轴名称">
        <a-input v-model:value="localOptions.xAxis.name" placeholder="请输入X轴名称" />
      </a-form-item>
      
      <a-form-item label="X轴最小值">
        <a-input-number v-model:value="localOptions.xAxis.min" style="width: 100%" />
      </a-form-item>
      
      <a-form-item label="X轴最大值">
        <a-input-number v-model:value="localOptions.xAxis.max" style="width: 100%" />
      </a-form-item>
      
      <!-- Y轴设置 -->
      <a-divider>Y轴设置</a-divider>
      
      <a-form-item label="Y轴名称">
        <a-input v-model:value="localOptions.yAxis.name" placeholder="请输入Y轴名称" />
      </a-form-item>
      
      <a-form-item label="Y轴最小值">
        <a-input-number v-model:value="localOptions.yAxis.min" style="width: 100%" />
      </a-form-item>
      
      <a-form-item label="Y轴最大值">
        <a-input-number v-model:value="localOptions.yAxis.max" style="width: 100%" />
      </a-form-item>
      
      <!-- 数据系列设置 -->
      <a-divider>数据系列</a-divider>
      
      <a-collapse v-model:activeKey="activeSeriesKeys">
        <a-collapse-panel 
          v-for="(series, index) in localOptions.series" 
          :key="'series-' + index"
          :header="`数据系列 ${index + 1}: ${series.name || '未命名'}`"
        >
          <a-form-item label="系列名称">
            <a-input v-model:value="series.name" placeholder="请输入系列名称" />
          </a-form-item>
          
          <a-form-item label="散点大小">
            <a-input-number 
              v-model:value="series.symbolSize" 
              :min="1" 
              :max="50"
              @change="() => emitUpdate()"
            />
          </a-form-item>
          
          <a-form-item label="散点颜色">
            <a-input 
              v-model:value="getSeriesItemStyle(index).color" 
              placeholder="如: #1890ff" 
              :addon-before="'颜色'"
              @change="() => emitUpdate()"
            />
          </a-form-item>
          
          <a-divider>数据点</a-divider>
          
          <div v-for="(point, pointIndex) in series.data" :key="pointIndex" class="data-point">
            <a-row :gutter="[16, 0]">
              <a-col :span="10">
                <a-form-item :label="`X值 ${pointIndex + 1}`">
                  <a-input-number 
                    v-model:value="point[0]" 
                    style="width: 100%"
                    @change="() => emitUpdate()"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item :label="`Y值 ${pointIndex + 1}`">
                  <a-input-number 
                    v-model:value="point[1]" 
                    style="width: 100%"
                    @change="() => emitUpdate()"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label=" " class="delete-btn-container">
                  <a-button 
                    type="primary" 
                    danger 
                    @click="removePoint(index, pointIndex)"
                    shape="circle"
                  >
                    <delete-outlined />
                  </a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          
          <a-button type="dashed" block @click="addPoint(index)" style="margin-top: 12px">
            <plus-outlined /> 添加数据点
          </a-button>
        </a-collapse-panel>
      </a-collapse>
      
      <a-divider></a-divider>
      
      <a-button type="dashed" block @click="addSeries">
        <plus-outlined /> 添加数据系列
      </a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:options']);

// 本地存储options，用于编辑
const localOptions = ref<any>({
  title: {
    text: '',
    show: false
  },
  tooltip: {},
  xAxis: {
    name: '',
    type: 'value',
    min: null,
    max: null
  },
  yAxis: {
    name: '',
    type: 'value',
    min: null,
    max: null
  },
  series: [
    {
      name: '系列1',
      type: 'scatter',
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.0, 6.95]
      ],
      itemStyle: {
        color: '#1890ff'
      }
    }
  ]
});

// 用于Collapse的活动面板
const activeSeriesKeys = ref<string[]>(['series-0']);

// 获取或初始化系列的itemStyle
const getSeriesItemStyle = (index: number) => {
  const series = localOptions.value.series[index];
  if (!series.itemStyle) {
    series.itemStyle = { color: getRandomColor() };
  }
  return series.itemStyle;
};

// 添加新的数据点
const addPoint = (seriesIndex: number) => {
  localOptions.value.series[seriesIndex].data.push([0, 0]);
  emitUpdate();
};

// 移除数据点
const removePoint = (seriesIndex: number, pointIndex: number) => {
  localOptions.value.series[seriesIndex].data.splice(pointIndex, 1);
  emitUpdate();
};

// 添加新的数据系列
const addSeries = () => {
  const newIndex = localOptions.value.series.length;
  localOptions.value.series.push({
    name: `系列${newIndex + 1}`,
    type: 'scatter',
    symbolSize: 20,
    data: [[0, 0]],
    itemStyle: {
      color: getRandomColor()
    }
  });
  
  // 添加新系列到激活的keys
  activeSeriesKeys.value.push(`series-${newIndex}`);
  
  emitUpdate();
};

// 生成随机颜色
const getRandomColor = () => {
  const colors = ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96'];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 向父组件发送更新的options
const emitUpdate = () => {
  emit('update:options', localOptions.value);
};

// 初始化
onMounted(() => {
  // 深拷贝props的options
  if (props.options) {
    localOptions.value = JSON.parse(JSON.stringify(props.options));
    
    // 确保必要的属性存在
    if (!localOptions.value.title) {
      localOptions.value.title = { text: '', show: false };
    }
    
    if (!localOptions.value.xAxis) {
      localOptions.value.xAxis = { name: '', type: 'value', min: null, max: null };
    }
    
    if (!localOptions.value.yAxis) {
      localOptions.value.yAxis = { name: '', type: 'value', min: null, max: null };
    }
    
    if (!localOptions.value.series || !localOptions.value.series.length) {
      localOptions.value.series = [{
        name: '系列1',
        type: 'scatter',
        symbolSize: 20,
        data: [[0, 0]],
        itemStyle: {
          color: '#1890ff'
        }
      }];
    } else {
      // 确保每个系列都有必要的属性
      localOptions.value.series.forEach((series: any) => {
        if (!series.data || !series.data.length) {
          series.data = [[0, 0]];
        }
        if (!series.symbolSize) {
          series.symbolSize = 20;
        }
      });
    }
  }
});

// 监听props.options变化
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    localOptions.value = JSON.parse(JSON.stringify(newOptions));
  }
}, { deep: true });

// 监听标题和坐标轴变化直接更新
watch([
  () => localOptions.value.title,
  () => localOptions.value.xAxis,
  () => localOptions.value.yAxis
], () => {
  emitUpdate();
}, { deep: true });
</script>

<style scoped>
.chart-settings {
  padding: 10px;
}

.data-point {
  padding: 10px;
  margin-bottom: 12px;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

.delete-btn-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
</style> 